@import '~scss/variables';
@import '~scss/mixins';

.header {
  padding: 12px;
  background-color: $light-color02;
  border: 1px solid $border-color;
  border-radius: $border-radius $border-radius 0 0;

  span {
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
    @include TypographySymbolText;
  }
}

:global {
  .d2h-file-wrapper {
    border-radius: 0 0 $border-radius $border-radius;
    border-color: $border-color;
    border-top-width: 0;
    background-color: #fff;
  }
  .d2h-file-header {
    display: none;
  }
  .d2h-code-line,
  .d2h-code-side-line {
    background-color: transparent !important;
  }
  .d2h-code-linenumber {
    background-color: rgba($light-color02, 0.8);
  }
  .d2h-file-diff .d2h-del.d2h-change {
    background-color: rgba($red-color01, 0.7);
  }
  .d2h-file-diff .d2h-ins.d2h-change {
    background-color: rgba($green-color01, 0.7);
  }
  .d2h-ins {
    background-color: rgba($green-color02, 0.7);
  }
  .d2h-code-line del,
  .d2h-code-side-line del {
    background-color: rgba($red-color02, 0.7);
  }
  .d2h-code-line ins,
  .d2h-code-side-line ins {
    background-color: rgba($green-color03, 0.7);
  }
}
